import React,{useState} from 'react'
import { SetOutline,RightOutline } from 'antd-mobile-icons'
import style from '../Lyf/My.module.css'
import img from '../Lyf/img/1.jpg'
import ding1 from '../Lyf/img/代付款.png'
import ding2 from '../Lyf/img/时间 (1).png'
import ding3 from '../Lyf/img/待收货.png'
import ding4 from '../Lyf/img/待评价.png'
import ding5 from '../Lyf/img/付款_面.png'
import yao1 from '../Lyf/img/邀请店主.png'
import yao2 from '../Lyf/img/水果福利.png'
import fw from '../Lyf/img/火.png'
import fw1 from '../Lyf/img/拼音输入.png'
import fw2 from '../Lyf/img/我的资产.png'
import fw3 from '../Lyf/img/天猫好券.png'
import fw4 from '../Lyf/img/邀客户进店.png'
import fw5 from '../Lyf/img/3.1-客服.png'
import fw6 from '../Lyf/img/商家.png'
import {useNavigate} from 'react-router-dom'

export default function My() {
    const navigate=useNavigate()

    const [currentMember, setCurrentMember] = useState(() => {
        const savedMember = localStorage.getItem('currentMember');
        return savedMember ? JSON.parse(savedMember) : null;
    });

    const formatDate = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
    };

    // 订单页面跳转函数
    const navigateToOrders = (orderType) => {
        navigate('/operation', { state: { orderType } });
    };

    return (
        <div className={style.my}>
            <div className={style.top}>
                <div className={style.user}>
                    {currentMember?.vipLevel > 0 ? (
                        <div className={style.vipAvatarContainer}>
                            <div className={style.vipGlow}></div>
                            <img src={img} alt="" className={style.vipAvatar} />
                            <div className={style.vipBadge}>
                                {currentMember.vipLevel}
                            </div>
                        </div>
                    ) : (
                        <img src={img} alt="" width="55px" height="55px" className={style.avatar} />
                    )}
                    <div style={{color:'white'}} className={style.font}>
                        <p style={{fontSize:"16px"}}>张三</p>
                        <p>176*****1304</p>
                    </div>
                </div>
                <SetOutline className={style.shezhi} />
                <div className={style.shangp}>
                    <ul className={style.statsList}>
                        <li className={style.statsItem} onClick={()=>navigate('/heartpage')}>
                            <span className={style.statsNumber}>3</span>
                            <br />
                            商品收藏
                        </li>
                        <li className={style.statsItem} onClick={()=>navigate('/shopgz')}>
                            <span className={style.statsNumber}>4</span>
                            <br />
                            店铺关注
                        </li>
                        <li className={style.statsItem} onClick={()=>navigate('/quan')}>
                            <span className={style.statsNumber}>7</span>
                            <br />
                            优惠券
                        </li>
                    </ul>
                </div>
                <div className={style.huiyuan}>
                    {currentMember?.vipLevel > 0 ? (
                        <>
                            <span className={style.vip}>VIP{currentMember.vipLevel}</span>
                            <span>有效期至: {formatDate(currentMember.expireDate)}</span>
                            <span className={style.kait1} onClick={()=>navigate('/vippage')}>会员中心</span>
                        </>
                    ) : (
                        <>
                            <span className={style.vip}>升级VIP</span>
                            <span>购物享5折，享更多VIP专属特权</span> 
                            <span className={style.kait} onClick={()=>navigate('/vippage')}>马上开通</span>
                            <RightOutline />
                        </>
                    )}
                </div>
            </div>
            <div className={style.myDing}>
                <div>
                    <span className={style.topding}>我的订单</span>
                    <span className={style.all} onClick={() => navigateToOrders('all')}>查看全部订单<RightOutline /></span>
                </div>
                <hr style={{width:'95%'}} />
                <div className={style.buy}>
                    <div onClick={() => navigateToOrders('unpaid')}>
                        <img src={ding1} alt=""/><br/>
                        <span>待付款</span>
                    </div>
                    <div onClick={() => navigateToOrders('unsent')}>
                        <img src={ding2} alt="" /><br/>
                        <span>待发货</span>
                    </div>
                    <div onClick={() => navigateToOrders('unreceived')}>
                        <img src={ding3} alt=""/><br/>
                        <span>待收货</span>
                    </div>
                    <div onClick={() => navigateToOrders('uncommented')}>
                        <img src={ding4} alt=""/><br/>
                        <span>待评论</span>
                    </div>
                    <div onClick={() => navigateToOrders('afterSales')}>
                        <img src={ding5} alt=""/><br/>
                        <span>退款/售后</span>
                    </div>
                </div>
            </div>
            <div className={style.myContainer}>
            {/* 活动卡片部分 */}
            <div className={style.promotionSection}>
                <div className={style.promotionCard}>
                    <div className={style.cardContent}>
                        <img 
                            src={yao1} 
                            alt="邀请店主" 
                            className={style.cardIcon}
                        />
                        <div className={style.cardText}>
                            <p className={style.cardTitle}>邀请店主</p>
                            <p className={style.cardSubtitle}>首单立减5元</p>
                        </div>
                    </div>
                    <RightOutline className={style.cardArrow} />
                </div>
                
                <div className={style.promotionCard1}>
                    <div className={style.cardContent}>
                        <img 
                            src={yao2} 
                            alt="0元水果" 
                            className={style.cardIcon}
                        />
                        <div className={style.cardText}>
                            <p className={style.cardTitle}>0元水果</p>
                            <p className={style.cardSubtitle}>免费包邮送到家</p>
                        </div>
                    </div>
                    <RightOutline className={style.cardArrow} />
                </div>
            </div>
            
            {/* 我的服务部分 */}
            <div className={style.serviceSection}>
                <h3 className={style.sectionTitle}>我的服务</h3>
                <div className={style.serviceGrid}>
                    {/* 第一行服务 */}
                    <div className={style.serviceItem}>
                        <img 
                            src={fw} 
                            alt="今日爆款" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>今日爆款</p>
                    </div>
                    
                    <div className={style.serviceItem}>
                        <img 
                            src={fw1} 
                            alt="来拼团" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>来拼团</p>
                    </div>
                    
                    <div className={style.serviceItem}>
                        <img 
                            src={fw2} 
                            alt="一元抽奖" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>一元抽奖</p>
                    </div>
                    
                    <div className={style.serviceItem}>
                        <img 
                            src={fw3} 
                            alt="天天领券" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>天天领券</p>
                    </div>
                    
                    {/* 第二行服务 */}
                    <div className={style.serviceItem}>
                        <img 
                            src={fw4} 
                            alt="邀请拉新" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>邀请拉新</p>
                    </div>
                    
                    <div className={style.serviceItem} onClick={() => navigate('/support')}>
                        <img 
                            src={fw5} 
                            alt="咨询客服" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>咨询客服</p>
                    </div>
                    
                    <div className={style.serviceItem}>
                        <img 
                            src={fw6}
                            alt="商家入驻" 
                            className={style.serviceIcon}
                        />
                        <p className={style.serviceName}>商家入驻</p>
                    </div>
                    
                    {/* 空白占位格 */}
                    <div className={style.serviceItemPlaceholder}></div>
                </div>
            </div>
        </div>
        </div>
    )
}
